<template>
  <div class="containerfrom">
    <div class="left" :style="{ width: leftWidth + '%' }">
      <LeftPanel></LeftPanel>
    </div>
    <div class="middle" :style="{ width: middleWidth + '%' }">
      <DropArea @reitem="reitem" @reform="reform"></DropArea>
    </div>
    <div class="right" :style="{ width: rightWidth + '%' }">
      <RightPanel ref="rightPanel" :item="selectedItem" :formc="formItem" ></RightPanel>
    </div>
    <el-button v-if="leftVisible"  size="mini" @click="toggleLeft" class="left-button"><i class="el-icon-s-fold"></i></el-button>
    <el-button v-else  size="mini" @click="toggleLeft" class="left-button"><i class="el-icon-s-unfold"></i></el-button>
    <el-button v-if="rightVisible"  size="mini" @click="toggleRight" class="right-button"><i class="el-icon-s-unfold"></i></el-button>
    <el-button v-else  size="mini" @click="toggleRight" class="right-button"><i class="el-icon-s-fold"></i></el-button>
  </div>
</template>
<script>
import LeftPanel from '@/components/LeftPanel.vue';
import DropArea from '@/components/DropArea.vue';
import RightPanel from '@/components/RightPanel.vue';
export default {
  components: {
    LeftPanel,
    DropArea,
    RightPanel
  },
  data() {
    return {
      leftWidth: 15,
      middleWidth: 70,
      rightWidth: 15,
      leftVisible: true,
      rightVisible: true,
      selectedItem: null,
      formItem:null,

    };
  },

  methods:{
    reitem(val){
      this.selectedItem=val
      this.$nextTick(()=>{
        this.$refs.rightPanel.init('field')
      })
    },
    reform(val){
      this.formItem=val
      this.$nextTick(()=>{
        this.$refs.rightPanel.init('form')
      })
    },
    toggleLeft(){
      this.leftVisible=!this.leftVisible
      if(this.leftVisible){
        this.middleWidth=this.middleWidth-15
        this.leftWidth=this.leftWidth+15
      }else{
        this.middleWidth=this.middleWidth+15
        this.leftWidth=this.leftWidth-15
      }
      
    },
    toggleRight(){
      this.rightVisible=!this.rightVisible
      if(this.rightVisible){
        this.middleWidth=this.middleWidth-15
        this.rightWidth=this.rightWidth+15
      }else{
        this.middleWidth=this.middleWidth+15
        this.rightWidth=this.rightWidth-15
      }
    }
  }
}
</script>
<style scoped>
.containerfrom {
  display: flex;
  height: 93vh;
  justify-content: center;
}

.left,
.middle,
.right {
  flex-grow: 1;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.left{
  border-right: 1px silver solid;
}

.right{
  border-left: 1px silver solid;
}
.lesize-handle{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 6px;
  background-color: #eee;
  cursor: ew-resize;
  z-index: 999;
}

.resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  background-color: #eee;
  cursor: ew-resize;
  z-index: 999;
}


/* 根据屏幕宽度决定是否显示左右侧内容 */
@media (max-width: 768px) {
  .left,
  .right {
    
    display: none;
  }

  .middle {
    flex-basis: 100%;
  }
}

</style>
<style scoped >

.left-button,
.right-button {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
}

.left-button {
  left: 0.5rem;
}

.right-button {
  right: 0.5rem;
}
</style>